<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		.cate{
			width: 840px;
			height: 50px;
			margin: 0 auto;
		}

		.cate .citem{
			width: 119px;
			height: 50px;
			border-left: 1px solid #000;
			float: left;
			color: #fff;
			text-align: center;
			line-height: 50px;
			background: #128A28 url() 0 0 no-repeat;
			position: relative;
		}
		.sitem{
			width: 119px;
			height: 50px;
			border-top: 1px solid #000;
			background: #128A28 url() 0 0 no-repeat;
		}
		.s_cate{
			display: none;
		}
		.s_cate .s_cate{
			position: absolute;
			top: 0px;
			left: 119px;
		}
	</style>
	<script type="text/javascript">
		window.onload= function () {
			citem = document.getElementsByClassName('citem');

			for (var i = 0; i < citem.length; i++) {
				
				citem[i].onmouseover = function () {
					find(this.childNodes,'s_cate').style.display="block";
				}

				citem[i].onmouseout = function () {
					
					find(this.childNodes,'s_cate').style.display="none";
				}
			};

			function find(arr,classname){
				for (var i = 0; i < arr.length; i++) {
					if(arr[i].className==classname){
						return arr[i];
					}
				}
			}
		}
	</script>
	<script type="text/javascript">
		// $(function () {
		// 	$('.citem').hover(function() {
		// 		$(this).find('.s_cate').show();
		// 	}, function() {
		// 		$(this).find('.s_cate').hide();
		// 	});
		// })
	</script>
</head>
<body>
	<ul class="cate">
		<li class="citem">
			栏目1
			<ul class="s_cate">
				<li class="citem">
					子栏目1
				</li>
				<li class="citem">
					子栏目2
					<ul class="s_cate">
						<li class="citem">子子栏目2</li>
						<li class="citem">子子栏目3</li>
					</ul>
				</li>
				<li class="citem">
					子栏目3
					<ul class="s_cate">
						<li class="citem">子子栏目2</li>
						<li class="citem">子子栏目3</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="citem">栏目2
			<ul class="s_cate">
				<li class="sitem">子栏目1</li>
				<li class="sitem">子栏目2</li>
				<li class="sitem">子栏目3</li>
			</ul>
		</li>
		<li class="citem">栏目3</li>
		<li class="citem">栏目4
			<ul class="s_cate">
				<li class="sitem">子栏目1</li>
				<li class="sitem">子栏目2</li>
			</ul>
		</li>
		<li class="citem">栏目5</li>
		<li class="citem">栏目6</li>
		<li class="citem">
			栏目7
			<ul class="s_cate">
				<li class="sitem">子栏目1</li>
				<li class="sitem">子栏目2</li>
				<li class="sitem">子栏目1</li>
				<li class="sitem">子栏目2</li>
				<li class="sitem">子栏目1</li>
				<li class="sitem">子栏目2</li>
			</ul>
		</li>
	</ul>
</body>
</html>